<template>
	<view class="slideshow" :class="slideshowStyle == 0 ? 'style-0':'style-1'">
		<swiper class="swiper" :style="{height:swiperHeight+'px'}" @change="changeFollowSwiper" 
		:current="swiperCurrentIndex" 
		:indicator-dots="indicatorDots" 
		indicator-color="rgba(255,255,255,.5)" 
		indicator-active-color="#ffffff" 
		:autoplay="autoplay" 
		:interval="interval" 
		:circular="circular" 
		>
			<swiper-item v-for="(item,index) in params" :key="index">
				<view class="swiper-item" @click="item.link.type == 'tominiprogram'? toMiniprogram(item.link):util.goToLink(item.link)">
					<image mode="widthFix" :src="item.img_url" @error="imageError" class="image"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- h5端弹出小程序码 -->
		<uni-popup ref="openQrcode" type="center">
			<view class="open-qrcode">
				<!--小程序二维码-->
				<view class="content">
					<view class="title">扫描进入小程序</view>
					<view v-if="qrcodeUrl">
						<image class="image" :src="qrcodeUrl" mode="widthFix"></image>
					</view>
					<view v-else>
						加载中...
					</view>
				</view>
				<view class="close-icon" @click="closeQrcode()">
					<text class="iconfont">&#xe622;</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'SlideShow',
		props: {
			title: {
				type: String,
				default: '轮播组件'
			},
			type: {
				type: String,
				default: 'SlideShow',
			},
			slideshowStyle: {
				type: Number,
				default: 0,
			},
			params: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				swiperHeight: 166,
				swiperCurrentIndex: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				circular:true,//是否采用衔接滑动，即播放到末尾后重新回到开头
				qrcodeUrl: ''
			}
		},
		onLoad(option) {
			
		},
		created() {
			//console.log(this.params)
			let _this = this;
			this.$nextTick(() => {
				setTimeout(function(){
					_this.getCurrentSwiperHeight('.swiper-item');
				},50)
			})
		},

		methods: {
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.swiperCurrentIndex].height;
					if(this.swiperHeight == 0) this.swiperHeight = 166
					//console.log(this.swiperHeight)
				})
			},
			// 切换swiper
			changeFollowSwiper(e) {
				let {current, source} = e.detail
				//只有页面自动切换，手动切换时才轮播，其他不允许
				if(source === 'autoplay' || source === 'touch'){
					 this.swiperCurrentIndex = current;
				}
				//this.swiperCurrentIndex = e.detail.current;
				this.$nextTick(() => {
					this.getCurrentSwiperHeight('.swiper-item');
			   });
			},
			
			imageError(e) {
				console.log('Image load Error;' + e.detail.errMsg)
			},
			
			/**
			 * 跳转小程序
			 * @param {Object} link
			 */
			toMiniprogram(link) {
				let that = this
				let params = link.param
				
				// 请求数据
				let url = 'entry/site/tominiprogram'
				//#ifdef MP-WEIXIN
				url = 'entry/wxapp/tominiprogram'
				//#endif
				//#ifdef H5
				url = 'entry/site/tominiprogram'
				//#endif
				// 获取数据
				this.util.request({
					url : url,
					data : {
						action: 'detail',
						id: params.id
					},
					success: function (res) {
						if (res.data.code == 200) {
							// #ifdef MP-WEIXIN
							wx.navigateToMiniProgram({
								appId: res.data.data.appid,
							})
							// #endif
							// #ifdef H5
							that.qrcodeUrl = res.data.data.qrcode_400
							console.log(that.cdnUrl)
							that.showQrcode()
							// #endif
						}
					}
				})
				
			},
			
			/**
			 * 弹出小程序二维码
			 * @param {Object} id
			 */
			showQrcode: function(data){
				this.$refs.openQrcode.open()
			},
			
			/**
			 * 关闭小程序二维码
			 */
			closeQrcode: function(){
				this.$refs.openQrcode.close()
			},
		}
	}
</script>

<style lang="scss">
	.slideshow {
		margin: 10rpx 0;
		.image {
			width: 100%;
			height: auto;
			display: block;
			will-change: transform;
		}
		&:first-child {
			margin: 0;
		}
	}
	.slideshow.style-0 {
		
	}
	.slideshow.style-1 {
		position: relative;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 2;
		.image {
			height: auto;
		}
	}
	
	.uni-swipe {
		.uni-swiper-dot-active {
			background-color: #fff;
			width: 22rpx;
		}
	}
	
	.open-qrcode {
		
		.content {
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			width: 480rpx;
			padding: 20rpx;
			.title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 52rpx;
			}
			.image {
				max-width: 100%;
			}
		}
		.close-icon {
			padding-top: 32rpx;
			text-align: center;
			color: #fff;
			.iconfont {
				font-size: 64rpx;
			}
		}
	}
	
</style>
